<template>
	<view class="dangerContainer" >
		<scroll-view scroll-y="true" style="height: calc(100vh - 400rpx);"  @scrolltolower="loadMore">
			<view class="dangerItem" v-for="(item,index) in list">
				<view class="dangerLine">
					<view class="dangerTitle">危险点</view>
					<view class="dangercontent">{{item.hazard}}</view>
					<view class="dangerIcon">
						<image  class="dangerimg" src='../../../static/icon/3.png' alt="1"  v-if="item.isPerformed==1"/>
						<image class="dangerimg" src='../../../static/icon/2.png' alt="1"  v-else/>

					</view>
				</view>
				<view class="dangerLine">
					<view class="dangerTitle">预控措施</view>
					<view class="dangercontent">{{item.controlMeasure}}</view>
				</view>
			</view>
		</scroll-view>
<!-- 		<view class="submeida">
			<view class="medialine">
				<view style="width: 300upx;text-align: center;">
					<view class="photo"></view>
					<view class="phototext">点击拍照或录像</view>
				</view>
			</view>
			<view class="medialine">
				<view style="width: 300upx;text-align: center;">
					<view class="audio"></view>
					<view class="audiotext">点击开始录音,再点击停止</view>
				</view>
			</view>
		</view> -->
		<view class="btnNext">
			<button type="primary" loading="false">下一步</button>
		</view>
	</view>
</template>

<script>
	import {
		getWtHazardControl
	} from '@/api/basic.js'
	export default {
		data() {
			return {
			   current:1,
			   size:10,
			   pages:1,
			   src: '',
			   clickTimes: 0,
			   textRadio: '点击开始录音，再点击停止',
			   list:[]
			}
		},
		props:{
			wtId:{
			   type:String
			}
		},
		components: {},
		mounted() {
			this.getDangerList()
		},
		methods: {
			/*
			 * 危险点预控
			 **/
			getDangerList(){
				getWtHazardControl({
					objId: this.otId,
					objNo:'WT',
					current: this.current,
					size:this.size
				}).then(res => {
					this.current++
					this.list = this.list.concat(res.result.records) 
					this.pages = res.result.pages
				})
			},
			// 加载更多
			loadMore(){
				const {current,pages} = this
				if(current<=pages) {			
					this.getDangerList()
				}
			}
		}
	}
</script>


<style>
	.dangerContainer{
		height: 100%;
		padding: 16upx;
	}
	.dangerItem{
		background-color: #FFFFFF;
		border-radius: 8upx;
		margin-top: 24upx;
	}
	.dangerLine{
		display: flex;
		border-bottom: solid 1upx #DFDFDF;
	}
	.dangerLine:last-child{
		border-bottom:0;
	}
	.dangerTitle{
		width: 152upx;
		color: #666666;
		font-size: 28upx;
		padding-top: 20upx;
		padding-bottom: 20upx;
		text-align: center;
		border-right: solid 1upx #dfdfdf;
	}

	.dangercontent{
		font-size: 28upx;
		padding-top: 20upx;
		padding-bottom: 20upx;
		padding-left: 24upx;
	}
	.dangerIcon{
		position: absolute;
		right: 24upx;
		
	}
	.dangerimg{
		margin-top: 8upx;
		width: 64upx;
		height: 64upx;
	}
	.submeida{
		position: absolute;
		width: 100%;
		display: flex;
		bottom: 140upx;
	}
	.medialine{
		flex: 1;
	}
	.photo{
		width: 116upx;
		height: 116upx;
		position: relative;
		left: 180upx;
		background:url(../../../static/icon/19.png);
		background-size: 100% 100%;
	}
	.phototext{
		font-size: 26upx;
		color: #333333;
		position: relative;
		left: 90upx;
		padding-top: 16upx;
	}
	.audio{
		width: 116upx;
		height: 116upx;
		position: relative;
		left: 120upx;
		background:url(../../../static/icon/20.png);
		background-size: 100% 100%;
	}
	.audiotext{
		font-size: 26upx;
		color: #333333;
		position: relative;
		left: 20upx;
		padding-top: 16upx;
	}
	.btnNext{
		width: 96%;
		position: absolute;
		bottom: 1upx;
	}
</style>
